import { Link, Outlet,history } from 'umi';
import './index.less';
import { TabBar } from 'antd-mobile'
import {  FileOutline, ShopbagOutline, TruckOutline, UserOutline } from 'antd-mobile-icons';
import { FC, useState } from 'react';

const Bottom: FC = () => {
  const { pathname } = location
  const [activeKey,setActiveKey] = useState(pathname);
  const setRouteActive = (value: string) => {
    setActiveKey(value);
    history.push(value)
  }

  const tabs = [
    {
      key: '/product',
      title: '商品快照',
      icon:<ShopbagOutline />
    },
    {
      key: '/',
      title: '用户',
      icon: <UserOutline />,
    },
    {
      key: '/order',
      title: '订单',
      icon: <TruckOutline />,
    },
    {
      key: '/log',
      title: '系统状态',
      icon: <FileOutline />,
    },
  ]
  return (
    <TabBar activeKey={activeKey} onChange={value => setRouteActive(value)} safeArea={true}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}
export default function Layout() {

  return (
    <div className='app'>
      <Outlet />
      <div className='bottom'>
          <Bottom />
        </div>
    </div>
  );
}
